// 渲染函数，发送请求获取学生信息列表，再渲染列表
// 渲染数据
// 封装函数方便后面调用重新渲染
// 因为gender的值是0或者1所以要判定如果是1就是女如果是0就是男
// 然后省市县要连着写所以通过拼接字符串+起来了
const gender = async () => {

    const { data } = await axios.get('/students')
    console.log(data);
    document.querySelector('.list').innerHTML = data.data.map(item => `
        <tr>
            <td>${item.name}</td>
            <td>${item.age}</td>
            <td>${item.gender ? "女" : "男"}</td>
            <td>第${item.group}组</td>
            <td>${item.hope_salary}</td>
            <td>${item.salary}</td>
            <td>${item.province + item.city + item.area}</td>
            <td>
            <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
            <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id="${item.id}"></i></a>
            </td>
        </tr>`).join('')

}
gender()
// 添加模块：
// 点击+号弹出模块窗
// 获取弹窗所有的表单元素，获取所有表单元素的值，添加非空判断，然后额外获取省市县并且省市县联动

let id = ""
// 获取加号添加点击事件通过 new bootstrop.Modal('#modal').show()显示模态框
document.querySelector('#openModal').addEventListener('click', function () {
    // 点击弹出模态窗
    id = ""
    new bootstrap.Modal('#modal').show()
    getprovince()


})
// 这里获取省市县的三个selete框，但是不要加value因为我们不用获取值只用获取框子就可以了
// 然后写一个函数发请求获取省，在加号的点击事件里面直接 写调用获取省的函数，然后写一个获取市的函数
// 同时创建一个省的change事件当省发生改变的时候调用市的获取函数这样就联动了市，同时在调用县的函数免得我们改变了省，县没有变化
// 再创建一个获取县数据的函数，同时创建一个市的change事件，当市发生改变的时候我们调用县数据的函数，这样就联动了县
let province = document.querySelector('[name="province"]')
let city = document.querySelector('[name="city"]')
let area = document.querySelector('[name="area"]')

// 省change事件
province.addEventListener('change', function () {
    getcity()
    getarea()

})

// 市change事件
city.addEventListener('change', function () {
    getarea()
})



// 获取省数据

const getprovince = async () => {
    const { data } = await axios('/api/province')
    province.innerHTML = `<option>--省--</option>` + data.data.map(item => `<option value="${item}">${item}</option>`)


}
// 获取市数据
const getcity = async () => {
    const { data } = await axios(`/api/city?pname=${province.value}`)
    city.innerHTML = `<option>--市--</option>` + data.data.map(item => `<option value="${item}">${item}</option>`)


}
// 获取县数据
const getarea = async () => {
    const { data } = await axios(`/api/area?pname=${province.value}&cname=${city.value}`)
    area.innerHTML = `<option>--县--</option>` + data.data.map(item => `<option value="${item}">${item}</option>`)


}
// 可以填写所有数据之后我们准备上传数据首先得获取所有表单里面的值，这个时候可以使用我们的formdata里面传入我们的form参数这样使用的话formdata就会把表单的key和value全部获取到一起
// 语法是：const fd = new FormData(document.querySelector('form'))但是fd不能直接拿去当参数用，因为会改变我们的请求头让他变成传输数据的请求模式，所以我们需要声明一个空对象，
// 用formdata自带foreach遍历一遍然后用里面的value和key参数，给obj加入数据，语法是：ojb[key]=value,但是因为接口的原因，我们有的数据只能是数字类型，所以我们需要修改obj属性的类型隐式转换一下
// 获取完成后我们需要再做非空判断这个时候用到我们的Object.values()属性和数组的some方法可以判定是不是有空的表单，如果有就返回true，再用if判断如果有就返回提示框表单不能为空，最后发送请求
// 再重新渲染数据。

// 确认按钮：获取表单元素，获取表单元素的值填入请求参数中，然后重新渲染页面
document.querySelector('.btn-blue').addEventListener('click', async function () {

    // 获取所有元素
    const fd = new FormData(document.querySelector('#form'))

    const obj = {}
    fd.forEach((value, key) => {
        obj[key] = value
    })
    console.log(obj);
    obj.age = +obj.age
    obj.group = +obj.group
    obj.hope_salary = +obj.hope_salary
    obj.salary = +obj.salary
    obj.gender = +obj.gender
    // 非空判断
    if (Object.values(obj).some(item => item === "")) {
        return Toast.fail('表单不能为空')
    }
    if (id) {
        const { data } = await axios.put(`/students/${id}`, obj)

    } else {
        const { data } = await axios.post("/students", obj)
    }

    gender()
    document.querySelector('.btn-secondary').click()


})
// 关闭按钮：点击清空表单
document.querySelector('.btn-secondary').addEventListener('click', function () {
    document.querySelector('form').reset()
})
document.querySelector('tbody').addEventListener('click', async function (e) {
    // 首先我们要用事件委托找到修改的按钮，这个时候用到了一个属性是classList.contains这个是判断该元素是否有这个类名如果有就返回true，如果没有就返回false，同时发送请求获取数据，
    // 请求中有id的参数，用到了我们提前写的自定义属性，这个时候在调用bootstrap中的模态框，获取所有表单的值，给他数据回显。但是获取表单元素的时候性别是特殊值所以我们需要做一个判断
    // 因为是0或者1而且有两个选项所有我们要获取伪数组同时通过判断选择给谁赋值。同时还有省市县的渲染，这个就需要我们重新获取一边省市县的数据但是因为省市县获取数据是异步的可能会没有执行完毕就执行了下面的代码导致bug，
    // 所以我们要给他加一个await让后面的代码等待数据获取完成再执行  渲染完毕之后再进行修改操作，上传数据，但是因为和增加用的是同一个模态框，
    //所以我们需要判断一下我们点击的是什么业务的模态框所以我们需要声明一个全局的id变量在点击加号的时候给id赋值为""，同时点击修改按钮的时候给id赋值为自定义id属性，再去增加模块发送请求的地方，判断id是否有值也就是是否为true如果是我们就发送put请求修改数据，
    // 如果是false就发送get请求增加数据。
    if (e.target.classList.contains('bi-pen')) {
        new bootstrap.Modal('#modal').show()
        // 数据回显
        const { data } = await axios.get(`/students/${e.target.dataset.id}`)
        console.log(data);
        document.querySelector('[name="name"]').value = data.data.name
        document.querySelector('[name="age"]').value = data.data.age
        document.querySelector('[name="group"]').value = data.data.group
        document.querySelector('[name="hope_salary"]').value = data.data.hope_salary
        document.querySelector('[name="salary"]').value = data.data.salary
        document.querySelectorAll('[name="gender"]')[data.data.gender].checked = true
        // 获取省
        await getprovince()
        province.value = data.data.province
        // 获取市
        await getcity()
        city.value = data.data.city
        // 获取县
        await getarea()
        area.value = data.data.area
        id = e.target.dataset.id
        console.log(id);

    } else if (e.target.classList.contains('bi-trash')) {

        const { data } = await axios.delete(`/students/${e.target.dataset.id}`)

        gender()
    }
})
